<template>
  <view class="mine-page">
    <view class="brief-introduction">
      <view class="basic">
        <view class="words">
          <view class="userName">倾听她的事</view>
          <view class="signature">每个人都有快乐的时候，你呢？</view>
        </view>
        <view class="avatar">
          <image style="width: 23.6vw; height: 23.6vw; border-radius: 12.8vw" src="../../static/avatars/avatar.png" mode="scaleToFill"></image>
          <view class="edit">
            <image style="display: block; width: 4.8vw; height: 4.8vw; margin: 1.4vw auto 0 auto; color: white" src="../../static/icons/avatarEdit.svg" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
      <view class="data">
        <view class="data-item">
          <view class="mount">97</view>
          <view class="name">人气</view>
        </view>
        <view class="data-item">
          <view class="mount">634</view>
          <view class="name">粉丝</view>
        </view>
        <view class="data-item">
          <view class="mount">58</view>
          <view class="name">关注</view>
        </view>
      </view>
    </view>
    <view class="options">
      <view class="option">
        <image class="icon" src="../../static/icons/download-option.svg" mode="scaleToFill"></image>
        <text class="description">历史下载</text>
      </view>
      <view class="option">
        <image class="icon" src="../../static/icons/check-option.svg" mode="scaleToFill"></image>
        <text class="description">审核进度</text>
      </view>
      <view class="option">
        <image class="icon" src="../../static/icons/help-option.svg" mode="scaleToFill"></image>
        <text class="description">帮助反馈</text>
      </view>
      <view class="option">
        <image class="icon" src="../../static/icons/setting-option.svg" mode="scaleToFill"></image>
        <text class="description">设置中心</text>
      </view>
    </view>
    <view class="myWorks">
      <view class="header">
        <view class="left">
          <view :style="{ left: leftStyle + 'vw' }" class="word">{{ showText }}</view>
          <view @click="myWorks" class="icon1">
            <image style="display: block; width: 4.4vw; height: 4.4vw" src="../../static/icons/take-photo.svg" mode="scaleToFill"></image>
          </view>
          <view @click="myFavors" class="icon1">
            <up-icon style="display: block" name="heart-fill" color="#ccc" size="4.4vw" bold></up-icon>
          </view>
        </view>
        <view class="right">
          <view class="icon1">
            <up-icon name="plus" color="#ccc" size="4.4vw" bold></up-icon>
          </view>
        </view>
      </view>
      <view class="show-page">
        <showItem v-for="(item, index) in workList" :key="index" :item="item"></showItem>
      </view>
      <view @click="show = true" class="upload">
        <image style="display: block; width: 6.4vw; height: 6.4vw; margin: 2.8vw auto 0 auto; color: white" src="../../static/icons/camera.svg" mode="scaleToFill"></image>
      </view>
    </view>
    <up-popup
      :customStyle="{ height: '117.2vw', width: '80vw', borderRadius: '3.6vw', backgroundColor: '#fff' }"
      :show="show"
      mode="center"
      @close="close"
      @open="open"
      safeAreaInsetBottom="true"
      safeAreaInsetTop="true"
    >
      <view class="upload-panel">
        <view class="header">
          <text class="tips">请选择上传画板</text>
          <up-icon @click="show = false" name="close" color="#000" size="5.2vw"></up-icon>
        </view>
        <view class="body">
          <view class="recently-create">
            <view class="title">最近新建</view>
            <view style="height: 43.6vw; width: 100%; text-align: left">
              <view class="option">风景壁纸</view>
              <view class="option">动物壁纸</view>
              <view class="option">可爱壁纸</view>
              <view class="option">手绘壁纸</view>
            </view>
          </view>
          <view class="other">
            <view class="option">风景壁纸</view>
            <view class="option">动物壁纸</view>
            <view class="option">可爱壁纸</view>
            <view class="option">手绘壁纸</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import showItem from './components/showItem.vue';
const leftStyle = ref(0);
const showText = ref('我的作品');
const myWorks = () => {
  leftStyle.value = 0;
  setTimeout(() => {
    showText.value = '我的作品';
  }, 0);
};
const myFavors = () => {
  leftStyle.value = 12.4;
  setTimeout(() => {
    showText.value = '我的喜欢';
  }, 0);
};

const workList = reactive([
  {
    imgList: ['/static/images/works/night/night0.png', '/static/images/works/night/night1.png', '/static/images/works/night/night2.png', '/static/images/works/night/night3.png'],
    title: '夜景',
    description: '听说夜晚的风景更美，缤纷的霓虹灯，江上的游轮......'
  },
  {
    imgList: ['/static/images/works/home/home0.png', '/static/images/works/home/home1.png', '/static/images/works/home/home2.png', '/static/images/works/home/home3.png'],
    title: '家居',
    description: '优美的家居装潢，值得你去入住'
  },
  {
    imgList: ['/static/images/works/sight/sight0.png', '/static/images/works/sight/sight1.png', '/static/images/works/sight/sight2.png', '/static/images/works/sight/sight3.png'],
    title: '风景',
    description: '这边风景很美，也许你应该点击打开看看'
  },
  {
    imgList: ['/static/images/works/other/other0.png', '/static/images/works/other/other1.png', '/static/images/works/other/other2.png', '/static/images/works/other/other3.png'],
    title: '未分类',
    description: '也许你需要给它们挑个好去处'
  },
  {
    imgList: ['/static/images/works/night/night0.png', '/static/images/works/night/night1.png', '/static/images/works/night/night2.png', '/static/images/works/night/night3.png'],
    title: '夜景',
    description: '听说夜晚的风景更美，缤纷的霓虹灯，江上的游轮......'
  },
  {
    imgList: ['/static/images/works/home/home0.png', '/static/images/works/home/home1.png', '/static/images/works/home/home2.png', '/static/images/works/home/home3.png'],
    title: '家居',
    description: '优美的家居装潢，值得你去入住'
  },
  {
    imgList: ['/static/images/works/sight/sight0.png', '/static/images/works/sight/sight1.png', '/static/images/works/sight/sight2.png', '/static/images/works/sight/sight3.png'],
    title: '风景',
    description: '这边风景很美，也许你应该点击打开看看'
  },
  {
    imgList: ['/static/images/works/other/other0.png', '/static/images/works/other/other1.png', '/static/images/works/other/other2.png', '/static/images/works/other/other3.png'],
    title: '未分类',
    description: '也许你需要给它们挑个好去处'
  }
]);

// 创建响应式数据
const show = ref(false);

// 定义方法
function open() {
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  // console.log('close');
}
</script>

<style lang="scss">
@import './index.scss';
</style>
